<template>
	<view class="content">

		<uni-search-bar placeholder="请输入关键词搜索" class="uni-searchbar" cancelButton="none" radius="50" @confirm="search"
			@clear="clearKeyword" />

		<view v-if="blogs.length==0" class="none">
			<image src="../../static/nodata.png" mode="widthFix" class="logo"></image>
			<text>抱歉，没有相关文章</text>
		</view>



		<view v-else class="item-container" v-for="(item,index) in blogs" :key="item.id" @click="gotoDetail(item.id)">
			<text class=item-title>{{item.title}}
				<!-- 收藏 -->
				<text class="iconfont icon-shoucang img-oper" @click.stop="popSheet(index.id)"></text>
			</text>
			<rich-text :nodes="item.description" class="item-desc"></rich-text>
			<image :src="item.picture" mode="widthFix" class="item-pic"></image>
			<text class="iconfont icon-arrow-down-filling img-oper" @click.stop="popSheet(item.id)"></text>
			<view>
				<text v-for="(tag,idx) in item.tags" :key="idx" class="item-tag">{{tag}}</text>
			</view>

			<image :src="item.user.avatar" mode="aspectFill" class="img-head" @click.stop="showUserInfo(item.user)">
			</image>
			<!-- 点赞评论分享 -->
			<view class="icon-container">

				<text @click.stop="onChangeGood(item,true)" v-if="good_ids.findIndex(e => e.id==item.id) < 0"
					class="iconfont icon-blackzan icon"></text>
				<text @click.stop="onChangeGood(item,false)" v-else class="iconfont icon-smailzan icon"></text>
				<text class="icon-text">{{item.good}}</text>

				<text class="iconfont icon-pinglun icon"></text>

				<text class="icon-text">{{item.comments.length}}</text>

				<text class="iconfont icon-yueduxiao icon"></text>

				<text class="icon-text">{{item.readCount}}</text>



			</view>
		</view>
		<view class="bottom" v-if="blogs.length==count">
			----我是有底线的----
		</view>

		<dialog-shell ref="shell" title="用户信息" @confirm="confirmInfo()">
			<text style="padding: 10rpx; font-size: 28rpx;">{{userDesc}}</text>
		</dialog-shell>

	</view>
</template>

<script>
	let page = 0;
	let size = 3;
	let key_blogs = "blogs";
	export default {
		data() {
			return {
				blogs: [],
				count: -1,
				isBottom: false,
				searching: false,
				good_ids: [],
				userDesc: ""

			}
		},
		//加载
		onLoad() {
			this.$noti.add(this.$params.noti_refresh_count, this.notifyRefreshCount, this)
			this.$noti.add(this.$params.noti_refresh_good, this.notifyRefreshGood, this)
			this.$noti.add(this.$params.noti_refresh_comment_count, this.notificationRefreshComment, this)
			let ids = uni.getStorageSync(this.$params.key_good_ids)
			if (ids) {
				this.good_ids = ids
			}

			let blogs = uni.getStorageSync(key_blogs)
			if (blogs) {
				//本地获取
				this.blogs = blogs
				this.count = blogs.length
			} else {
				//服务器获取
				this.getData()
			}

		},

		onUnload() {
			this.$noti.remove(this.$params.noti_refresh_count, this)
			this.$noti.remove(this.$params.noti_refresh_good, this)
			this.$noti.remove(this.$params.noti_refresh_comment_count, this)
		},

		//下拉刷新
		onPullDownRefresh() {
			page = 0;
			this.blogs = [];
			this.count = -1;
			this.getData();
		},
		//到底部时加载下一页
		onReachBottom() {

			if (this.blogs.length == this.count || this.searching) {
				this.isBottom = true;
				uni.showToast({
					title: "加载完成"
				})
				return;
			}
			page += 1;
			this.getData();
		},

		methods: {
			showUserInfo(user) {
				this.$refs.shell.show();
				this.userDesc = "作者" + user.nickName + "\n联系方式" + user.email;
			},
			confirmInfo() {
				console.log("emit");
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			notifyRefreshCount(info) {
				let id = info.id
				let count = info.count
				this.refreshReadCount(id, count)
			},
			notifyRefreshGood(info) {
				let id = info.id
				let index = this.blogs.findIndex(obj => obj.id === info.id);
				let good = info.good
				this.blogs[index].good = info.count
				let goods = uni.getStorageSync(this.$params.key_good_ids)
				this.good_ids = goods
				uni.setStorageSync(this.$params.key_blogs, this.blogs)
			},
			notificationRefreshComment(info) {
				console.log(info);
				let id = info.id
				let comments = info.comments
				let index = this.blogs.findIndex(obj => obj.id === id);
				this.blogs[index].comments = comments
				uni.setStorageSync(this.$params.key_blogs, this.blogs);
			},
			refreshReadCount(id, count) {
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.readCount = count
					}
				})
				uni.setStorageSync(this.$params.key_blogs, this.blogs);
			},

			onChangeGood(b, isGood) {
				//TODO同步到服务器，并且取最新数据

				// let url = this.$params.host
				// let action = isGood ? this.$params.action_good : this.$params.action_del_good
				// url += action
				// let data = {
				// 	"id": ids
				// }
				// this.$request.postParam(url, data, res => {
				// 	this.blogs.forEach(blog => {
				// 		if (blog.id == id) {
				// 			blog.good = res.data
				// 		}
				// 	})
				// 	if (isGood) {
				// 		// this.good_ids.push(id)
				// 		this.good_ids = this.good_ids.concat(id)
				// 	} else {
				// 		let index = this.good_ids.indexOf(id)
				// 		//shift删除第一个元素 ,pop删除最后一个元素,splice删除指定位置元素
				// 		//pop，把最后一个元素替换要删除的元素 然后pop【1，2，3，4，5】
				// 		//数组简答且顺序不影响程序功能时，课提高性能
				// 		// this.good_ids.splice(index,1)
				// 		this.$util.remove(this.good_ids, index)
				// 	}
				// 	uni.setStorageSync(this.$params.key_good_ids, this.good_ids)
				// }, () => {})

				let url = this.$params.host + (isGood ? this.$params.action_good : this.$params.action_del_good);
				let data = {
					"id": b.id,
				}
				// console.log(b);

				this.$request.postParam(url, data, res => {
					this.blogs.forEach(blog => {
						if (blog.id == b.id) {
							blog.good = res.data;
						}
					})
					let blog_data = {
						"picture": b.picture,
						"id": b.id,
						"title": b.title
					}
					if (isGood) {
						this.good_ids.push(blog_data);
					} else {
						this.good_ids.splice(this.good_ids.findIndex(e => e.id == b.id), 1);
					}
					uni.setStorageSync(this.$params.key_good_ids, this.good_ids);
					uni.setStorageSync(key_blogs, this.blogs);
					uni.setStorageSync(this.$params.key_good_ids)
					console.log();
					// console.log(this.good_ids.findIndex(e => e.id==b.id));
				}, () => {

				});

			},
			getData() {
				console.log("开始分页请求");
				let header = {
					"content-type": this.$params.content_type,
					"page": page,
					"size": size
				}
				this.$request.getWithHeader(this.$params.host + this.$params.action_blogs_page, header, res => {

					res.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture;
						blog.user.avatar = this.$params.host + blog.user.avatar;
					});
					this.blogs = [...this.blogs, ...res.data]
					uni.setStorageSync(key_blogs, this.blogs)
					this.count = parseInt(res.message);
				}, () => {
					//停止下拉刷新 否则会一直进行刷新

				});
			},
			search(e) {
				let kw = e.value
				if (kw.length > 0) {
					this.blogs = [],
						this.count = -1;
					//发送请求
					// let url=this.$params.host+this.$params.action_blogs_search+kw
					this.$request.get(this.$params.host + this.$params.action_blogs_search + kw, res => {
						res.data.forEach(blog => {
							blog.picture = this.$params.host + blog.user.avatar;
						});
						this.blogs = [...this.blogs, ...res.data]
						this.count = parseInt(res.message);
						this.searching = true;
					}, () => {

						console.log("搜索完成");
					});
				}
			},
			clearKeyword() {
				//初始化blgos
				this.count = -1;
				this.blogs = [];
				this.searching = false;
				//初始化页码
				this.getData();
			},

			popSheet(id) {
				uni.showActionSheet({
					itemList: ["删除", "收藏"],
					success: res => {
						if (res.tapIndex == 0) {
							uni.showModal({
								title: '删除blog',
								content: '确定删除吗',
								showCancel: true,
								cancelText: '算了',
								confirmText: '删除',
								success: res => {
									if (res.confirm) this.deleteBlog(id)
								},
								fail: () => {},
								complete: () => {}
							});
						} else if (res.tapIndex == 1) {
							uni.showToast({
								title: "已收藏"
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			deleteBlog(id) {
				//todo:删除blog
				uni.showToast({
					title: '还未登录，不能删除'
				});
			},
			refreshGood(ids) {
				uni.setStorageSync(this.$params.key_good_ids, this.good_ids);
				this.good_ids = ids;
			}

		}
	}
</script>


<style>
	@import url("index.css");
	@import url("../../common/iconfont.css");
</style>
